<template>
    <div class="view-container">

        <header-module left-custom padding>
            <template #left-con>
                <div>
                    客户线索
                    <span style="margin-left: 10px">{{datas.clueNo}}</span>
                </div>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
                <template v-if="userInfo.ID == datas.headId">
                    <el-button class="delete-btn" lass="main-btn" size="small" v-if="datas.clueStatus == 2" @click="onDelete">删除</el-button>

                    <el-dropdown @command="handleCommand" v-if="datas.clueStatus == 0 || datas.clueStatus == 1">
                        <el-button lass="main-btn" size="small" type="primary" style="margin-left: 10px">转换为客户</el-button>

                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="1">代理商</el-dropdown-item>
                                <el-dropdown-item command="2">商销客户</el-dropdown-item>
                                <el-dropdown-item command="3">终端</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>

            </template>

        </header-module>

        <div class="info-container">

            <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="110px" size="small">
                <el-row style="margin-left: 0px;margin-right:0px;">
                    <el-col :span="8">
                        <el-form-item label="联系人：" style="width: 100%;">
                            {{datas.contactName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系电话：" style="width: 100%;">
                            {{datas.contactPhone}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="公司：" style="width: 100%;">
                            {{datas.company}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="线索来源：" style="width: 100%;">
                            {{getLabel('clue_source',datas.clueSource)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系地址：" style="width: 100%;">
                            {{datas.provinceName}}{{datas.cityName}}{{datas.areaName}}{{datas.address}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="线索状态：" style="width: 100%;">
                            <template v-if="!isEdit">
                                <span v-if="datas.clueStatus == 3 || userInfo.ID != datas.headId">{{getLabel('clue_status',datas.clueStatus)}}</span>

                                <div v-else-if="userInfo.ID == datas.headId" class="change-item" @click="statusChange">
                                    <span>{{getLabel('clue_status',datas.clueStatus)}}</span>

                                    <el-icon><edit /></el-icon>
                                </div>
                            </template>

                            <template v-else>
                                <div class="change-select">
                                    <el-select
                                            v-model="status"
                                            style="width: 100%"
                                            placeholder="请选择线索状态">
                                        <el-option
                                                v-for="item in statusOption"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>

                                    <el-icon @click="statusConfirm"><check /></el-icon>

                                    <el-icon @click="statusCancel"><close-bold /></el-icon>
                                </div>

                            </template>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="关联营销任务：" style="width: 100%;">

                            <el-link
                                    :underline="false"
                                    style="display: flex;align-items: center;justify-content: left"
                                    type="primary"
                                    @click="onPlan"
                            >
                                {{datas.taskNo}}
                            </el-link>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责跟进职员：" style="width: 100%;">
                            {{datas.headName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="最后跟进时间：" style="width: 100%;">
                            <span v-if="datas.lastTime">{{dateFormat('yyyy-mm-dd HH:MM',datas.lastTime)}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div class="main-content">

            <el-tabs v-model="activeName" @tab-click="handleClick" class="elTabs">
                <el-tab-pane label="跟进记录" name="1">
                    <followRecord :datas="datas"/>
                </el-tab-pane>
                <el-tab-pane label="修改记录" name="2">
                    <operation-view mode="clue"/>
                </el-tab-pane>
            </el-tabs>

        </div>

        <fromDialog ref="fromDialog" :clue-id="datas.id" @succsess="getData"/>

        <newForm ref="newFormRef" :clue-id="datas.id" @succsess="getData"/>

        <rule-form ref="ruleForm" :clue-id="datas.id" :sub="{boole: false,title: '保存'}" type-str="create" form-type="2" @succsess="getData"/>

        <detail-drawer
                ref="comDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span>营销任务</span>

            </template>
            <template #contents>

                <taskConfirmView :id="datas.saleTaskId"/>

            </template>
        </detail-drawer>

    </div>

</template>

<script>

    import {crmStore} from "../../../../../store";
    import { ArrowDown, Edit, Check, CloseBold } from '@element-plus/icons'
    import { useRouter, useRoute } from 'vue-router'
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "index",
        components:{
            followRecord:defineAsyncComponent(
                ()=>import('../../modules/followRecord.vue')
            ),
            ArrowDown,Edit,Check,CloseBold,
            fromDialog:defineAsyncComponent(
                ()=>import('../../../customer/modules/fromDialog.vue')
            ),
            ruleForm:defineAsyncComponent(
                ()=>import('../../../customer/terminal/modules/ruleForm.vue')
            ),
            newForm:defineAsyncComponent(
                ()=>import('../../../customer/shangPin/modules/newForm')
            ),
            taskConfirmView:defineAsyncComponent(
                ()=>import('../../../../commonView/detailComponents/task/taskConfirmView.vue')
            )
        },
        setup(){
            const api = inject('api')
            const currentInstance = getCurrentInstance()
            const route = useRoute()
            const router = useRouter()
            const userInfo = crmStore.getters['user/userInfo']
            const statusOption = crmStore.getters['dictionary/getDictionary']['clue_status']

            var data = reactive({
                activeName:'1',
                datas:{},
                isEdit:false,
                status:'',
                fromDialog:null,
                newFormRef:null,
                ruleForm:null,
                comDrawer:null,
            })

            const getData = () => {
                api.task.TASK_CLUE_DETAIL(route.query.id).then(res => {
                    if (!res.code){
                        data.datas = res.data
                    }else{
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const handleClick = () => {

            }

            const onBack = () => {
                router.back()
            }

            const handleCommand = (command) => {
                console.log(command)
                if (command == 1){
                    data.fromDialog.open(null,null,data.datas)
                }else if (command == 2){
                    data.newFormRef.open("新建商销客户", null,data.datas);
                }else if (command == 3){
                    data.ruleForm.open(null, 1 ,data.datas);
                }
            }

            const statusChange = () => {
                data.status = data.datas.clueStatus
                data.isEdit = true
            }

            const statusConfirm = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '你确定更改此线索状态？',
                        title: '更改状态',
                    })
                    .then(() => {
                        api.task.TASK_CLUE_IPDATE_STATUS({clueId:data.datas.id,clueStatus:data.status}).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'更改成功'})
                                data.isEdit = false
                                getData()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })

            }

            const onDelete = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '你确定删除此跟进线索？删除后不可恢复',
                        title: '删除',
                    })
                    .then(() => {
                        api.task.TASK_CLUE_DELETE(data.datas.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'删除成功'})
                                onBack()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const onPlan = () => {
                data.comDrawer.open()
            }

            const statusCancel = () => {
                data.isEdit = false
            }

            onMounted(()=>{
                getData()
            })

            return{
                ...toRefs(data),
                userInfo,
                statusOption,

                onBack,
                handleClick,
                handleCommand,
                statusChange,
                statusConfirm,
                statusCancel,
                onDelete,
                onPlan,
                getData,
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .change-item{
        color: $main-color;
        display: flex;
        align-items: center;
        .el-icon{
            margin-left: 20px;
        }
    }
    .change-select{
        display: flex;
        align-items: center;
        .el-icon{
            color: $main-color;
            margin-left: 20px;
        }
    }
</style>
